import React from 'react';
import { CommentCount } from './components/CommentCount';
import { Tabs } from './components/Tabs';
import { Forms } from './components/Forms';
import { CommentList } from './components/CommentList';

// 导入样式
import './App.css';

export class App extends React.Component {
  // 组件数据
  constructor() {
    // 初始化this，因为继承了。
    super();
    this.state = {
      // hot: 热度排序  time: 时间排序
      tabs: [
        {
          id: 1,
          name: '热度',
          type: 'hot',
        },
        {
          id: 2,
          name: '时间',
          type: 'time',
        },
      ],
      active: 'hot',
      list: [
        {
          id: 1,
          author: '刘德华',
          comment: '给我一杯忘情水',
          time: new Date('2022-10-10 09:09:00'),
          // 1: 点赞 0：无态度 -1:踩
          attitude: 1,
        },
        {
          id: 2,
          author: '周杰伦',
          comment: '哎哟，不错哦',
          time: new Date('2021-10-10 09:09:00'),
          // 1: 点赞 0：无态度 -1:踩
          attitude: 0,
        },
        {
          id: 3,
          author: '五月天',
          comment: '不打扰，是我的温柔',
          time: new Date('2021-10-11 10:09:00'),
          // 1: 点赞 0：无态度 -1:踩
          attitude: -1,
        },
      ],
    };
  }

  // 定义排序事件处理函数，传递给子组件
  changeTab = (type) => {
    console.log('最新的排序类型', type);
    // 重新排序
    if (type === 'hot') {
      const newList = this.state.list.sort((a, b) => {
        // a - b 是升序, b -a 是降序
        return b.id - a.id;
      });
      // 设置页面数据
      this.setState({
        active: type,
        list: newList,
      });
    } else {
      const newList = this.state.list.sort((a, b) => {
        // a - b 是升序, b -a 是降序
        return b.time.getTime() - a.time.getTime();
      });
      // 设置页面数据
      this.setState({
        active: type,
        list: newList,
      });
    }
  };

  // 删除评论的事件处理函数
  delComment = (id) => {
    console.log('删除评论的id', id);
    // 过滤删除的评论
    const newList = this.state.list.filter((item) => item.id !== id);
    // 设置页面数据
    this.setState({
      list: newList,
    });
  };

  // 定义点赞或踩的事件处理函数
  changeAttitude = (id, attitude) => {
    console.log('点赞或踩', id, attitude);
    // 生成最新的列表
    const newList = this.state.list.map((item) => {
      if (item.id === id) {
        return { ...item, attitude: attitude };
      }
      return item;
    });

    // 设置页面数据
    this.setState({
      list: newList,
    });
  };

  // 获取评论内容
  addComment = (comment) => {
    console.log('用户输入的评论', comment);
    // 组装评论列表数据
    const newComment = {
      id: Date.now(),
      author: 'xxx',
      comment: comment,
      time: new Date(),
      attitude: 0,
    };
    // 设置页面list数据
    this.setState({
      list: [newComment, ...this.state.list],
    });
  };

  render() {
    console.log('props', this.props);
    return (
      <div className="comment-root">
        <div className="comment-container">
          {/* <h1>{this.props.children}</h1> */}
          <>{this.props.children}</>
          <CommentCount number={this.state.list.length} />
          <Tabs
            tabs={this.state.tabs}
            active={this.state.active}
            changeTab={this.changeTab}
          />
          <Forms addComment={this.addComment} />
          <CommentList
            list={this.state.list}
            delComment={this.delComment}
            changeAttitude={this.changeAttitude}
          />
          <>{this.props.children}</>
        </div>
      </div>
    );
  }
}

export default App;
